<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>商品分类管理</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../plugins/select2/select2.css" />
	<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
	<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
<!-- .box-body -->

<div class="box-header with-border">
	<h3 class="box-title">商品分类管理
	</h3>
</div>

<div class="box-body">
	<ol class="breadcrumb">
		<!--<li>
			<a href="#" onclick="getDate(0)" >顶级分类列表</a>
		</li>-->
		<div id="li"></div>
		<!--<li>
			<a href="#" >珠宝</a>
		</li>
		<li>
			<a href="#" >银饰</a>
		</li>-->
	 </ol>

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" onclick="deleteInfo()" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="刷新" ><i class="fa fa-check"></i> 刷新</button>

				</div>
			</div>
		</div>
		<!--数据列表-->
		<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			<thead>
			<tr>
				<th class="" style="padding-right:0px">
					<input type="checkbox" class="icheckbox_square-blue">
				</th>
				<th class="sorting_asc">分类ID</th>
				<th class="sorting">分类名称</th>
				<th class="sorting">类型模板ID</th>

				<th class="text-center">操作</th>
			</tr>
			</thead>
			<tbody id="tbody_id">

			</tbody>
		</table>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">商品分类编辑</h3>
			</div>
			<div class="modal-body">
<!--				<input type="hidden" id="pid">-->
				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>上级商品分类</td>
						<td>
							<!--珠宝 >>  银饰-->
							<div id="addLi"></div>
						</td>
					</tr>
					<tr>
						<td>商品分类名称</td>
						<td><input  class="form-control" id="catName" placeholder="商品分类名称">  </td>
					</tr>
					<tr>
						<td>类型模板</td>
						<td>
							<select id="types" style="width: 100%" multiple>
								<option th:each="t:${type}" th:value="${t.id}">[[${t.name}]]</option>
							</select>
						</td>
						<!--<td>
							<input select2 config="options['type_template']" placeholder="商品类型模板" class="form-control" type="text"/>
						</td>-->
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="toSaveAdd()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>



<!-- 编辑窗口 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabels">商品分类编辑</h3>
			</div>
			<div class="modal-body">
				<input type="hidden" id="pids">
				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>上级商品分类</td>
						<td>
							<!--珠宝 >>  银饰-->
							<div id="updateLi"></div>
						</td>
					</tr>
					<tr>
						<td>商品分类名称</td>
						<td><input  class="form-control" id="catNames" placeholder="商品分类名称">  </td>
					</tr>
					<tr>
						<td>类型模板</td>
						<td>
							<select id="typess" style="width: 100%" multiple>
								<option th:each="t:${type}" th:value="${t.id}">[[${t.name}]]</option>
							</select>
						</td>
						<!--<td>
							<input select2 config="options['type_template']" placeholder="商品类型模板" class="form-control" type="text"/>
						</td>-->
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="toUpdateInfo()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<script>
	var o = 0;
	$(function (){
		$("#types").select2();
		$("#typess").select2();
		getDate(0);
	})
	function getDate(obj){
		sublevel(obj);
		o = obj;
		$.ajax({
			url:"/itemCat/getItemCatInfo",
			type : "post",
			dataType :"json",
			data:{parentId:obj},
			success : function (result){
				if (result.code==10000){
					var list = result.result
					var table = "";
					for (var i = 0; i < list.length; i++) {
						table +='<tr>';
						table +='<td><input type="checkbox" name="check" value="'+list[i].id+'"></td>';
						table +='<td>'+ list[i].parentId +'</td>';
						table +='<td>'+ list[i].name +'</td>';
						table +='<td>'+ list[i].typeId +'</td>';
						table +='<td className="text-center">';
						table +='<button type="button" class="btn bg-olive btn-xs" id="xx"  onclick="getDate('+list[i].id+')" >查询下级</button>';
						table +='<button type="button" class="btn bg-olive btn-xs" onclick="selectItemsById('+list[i].id+')" data-toggle="modal" data-target="#updateModal">修改</button>';
						table +='</td>';
						table +='</tr>';
					}
					$("#tbody_id").html(table);
				}
			}
		})
	}

	//    增加
	function toSaveAdd() {
		$.ajax({
			url:"/itemCat/insertItemCatInfo",
			type : "post",
			dataType :"json",
			data : {parentId:o,name:$("#catName").val(),typeId:$("#types").val()},
			success : function (result){
				if (result.code == 10000){
					window.location.reload();
					alert(result.message);
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误")
			}
		})
	}


	//    回显
	function selectItemsById(id) {
		$.ajax({
			url:"/itemCat/updateItemCat?id="+id,
			type : "post",
			dataType :"json",
			success : function (result){
				if (result.code == 10000){
					var cat = result.result;
					$("#catNames").val(cat.name);
					$("#pids").val(cat.id);
					$("#typess").val(cat.typeId).trigger("change");
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误")
			}
		})
	}


	//    修改
	function toUpdateInfo() {
		$.ajax({
			url:"/itemCat/updateItemCatInfo",
			type : "post",
			dataType :"json",
			data : {id:$("#pids").val(),name:$("#catNames").val(),typeId:$("#typess").val()},
			success : function (result){
				if (result.code == 10000){
					window.location.reload();
					alert(result.message);
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误")
			}
		})
	}


	//    删除
	function deleteInfo() {
		var ids = [];
		var checks = $("[name=check]");
		for (var i = 0; i <checks.length; i++) {
			if (checks[i].checked){
				ids.push(checks[i].value);
			}
		}
		$.ajax({
			url:"/itemCat/deleteInfo?ids="+ids,
			type : "post",
			dataType :"json",
			success : function (result){
				if (result.code == 10000){
					window.location.reload();
					alert(result.message);
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误")
			}
		})
	}

	// ----    -----

	function sublevel(obj) {
		$.ajax({
			url:"/itemCat/sublevel",
			type:"get",
			data:{id:obj},
			dataType:"json",
			async:false,
			success:function (result){
				if (result.code == 10000){
					let list = result.result;
					console.log(list)
					let box = "<li><a onclick=\"getDate(0)\">顶级分类列表</a></li>";
					if (list != null){
						for(var i = 0; i < list.length; i++){
							box += "<li><a onclick='getDate("+list[i].id+")'>"+list[i].name+"</a></li>";
						}
					}
					console.log(box)
					$("#li").html(box);
					$("#addLi").html(box);
					$("#updateLi").html(box);
				}
			},
			error:function (result){
				alert("系统异常!");
			}
		})
	}

</script>
</body>
</html>